<!--
 * @Author: ruins
 * @Date: 2022-01-21 10:50:11
 * @LastEditors: ruins
 * @LastEditTime: 2022-01-21 11:09:44
 * @FilePath: \white-dragon\src\components\TitleBar\index.vue
-->
<template>
  <div class="title-bar">
    <el-card>
      <div class="mask"></div>
      <slot></slot>
    </el-card>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {}
  },
  components: {},
  created () { },
  mounted () { },
  methods: {},
  computed: {},
  watch: {}
}
</script>

<style scoped>
.title-bar {
  margin-bottom: 20px;
}

::v-deep .el-card__body {
  position: relative;
  padding: 20px 20px;
}
.mask {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 23px;
  border-radius: 0 5px 5px 0;
  background-color: skyblue;
  transform: translateY(-50%);
}
</style>
